<template>
  <div class="imageBrowsing_wrapper">
    <child-header :title="title"></child-header>
    <section class="imageBrowsing_content p_t_80">
      <div class="_pr">
        <div
          class="_flag _pa"
          v-show="flagShow"
          @click="onUndo"
        >
          <img
            src="@/assets/images/cx.png"
            alt=""
          >
        </div>
        <!-- <div class="_wl _pa font_25">
          W {{wc}} / L {{wl}}
        </div> -->
        <div
          class="dwvs_wrapper"
          ref="dwvsWrapper"
        >
          <section
            :class="{'ac':selfDwvsItemAc == i}"
            class="dwvs_item"
            ref="dwvsItem"
            v-for="(v,i) in dwvsItemNum"
            :key="i"
            @touchstart="selfDwvsItemAcFn(i)"
          >
            <div
              :id="setDwvId(i)"
              class="c_dwv"
            >
              <div class="layerContainer">
                <div class="dropBox"></div>
                <canvas
                  style="position:absolute;top:0;left:0"
                  ref="dwvsCanvas"
                  class="imageLayer"
                >仅适用于兼容HTML5的浏览器……</canvas>
                <div
                  class="drawDiv"
                  ref="drawDiv"
                ></div>
                <div class="infoLayer">
                  <div class="infotl info"></div>
                  <div class="infotc infoc"></div>
                  <div class="infotr info"></div>
                  <div class="infocl infoc"></div>
                  <div class="infocr infoc"></div>
                  <div class="infobl info"></div>
                  <div class="infobc infoc"></div>
                  <div class="infobr info"></div>
                </div>
              </div>
              <div
                class="history"
                style="display:none"
              ></div>
            </div>
          </section>
        </div>
      </div>
      <div class="imageBrowsing_content_fixed_warpper">
        <div>
          <div ref="tcSfPathWarpper">
            <div
              ref="tcSfPath"
              class="m_l_3 _pr"
              @click="getImg(index)"
              :class="{acImg: acImgList=== index}"
              v-for="(v ,index) in powerfilmeList"
              :key="index"
            >
              <img
                :src="v.getSmallFilePath"
                alt=""
              >
              <span class="_pa flag_num">{{v.getDcmFilePath.length}}</span>
            </div>
          </div>
        </div>
        <div>
          <div
            class="nav_item"
            :class="{_pr:1, border_r_1: index < bottomNavListConfig.length-1,ac: index== bottomNavAc}"
            v-for=" (value,index) in bottomNavListConfig"
            :key="index"
            @click="clickBottomNav(value,index)"
          >
            <img
              :src="value.imgSrc"
              alt=""
            >
            <span>
              <span>{{value.text}}</span>
            </span>
            <ul
              class="_pa button_nav_ul font_25"
              v-if="value.selsected && index != 0"
            >
              <li
                v-for="(v,i) in value.childList"
                :key="i"
                @click="clickBottomNav(v,i,index)"
              >
                {{v.text}}
              </li>
            </ul>
            <ul
              class="_pa button_nav_ul font_25 _sequence_style"
              v-if="value.selsected && index == 0"
            >
              <li
                v-for="(v,i) in value.childList"
                :key="i"
                @click="clickBottomNav(v,i,index)"
              >
                <!-- {{v.text}} {{v.selsected}} -->
                <img
                  :src="v.src"
                  alt=""
                >
              </li>
            </ul>
          </div>
        </div>
      </div>

    </section>
  </div>
</template>

<script>
/******************** dwv ************************** */
import Dwv from "@/bin/dwv";
let dwv = Dwv.getDwv();
/******************** dwv ************************** */
import { HttpService, Wlpreset } from "../../provides/index";
// 底部导航config
let bottomNavListConfig = [
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "序列",
    imgSrc: require("@/assets/images/xl.png"),
    childList: [
      {
        selsected: false,
        text: "1",
        block: 1,
        width: "100%",
        height: "100%",
        marginBottom: "0",
        src: require("@/assets/images/block1.png")
      },
      {
        selsected: false,
        text: "2",
        block: 2,
        width: "100%",
        height: "49.7%",
        marginBottom: "0.05rem",
        src: require("@/assets/images/blockt1.png")
      },
      {
        selsected: false,
        text: "3",
        block: 2,
        width: "49.9%",
        height: "100%",
        marginBottom: "0",
        src: require("@/assets/images/blockl1.png")
      },
      {
        selsected: false,
        text: "4",
        block: 4,
        width: "49.9%",
        height: "49.7%",
        marginBottom: "0.05rem",
        src: require("@/assets/images/block4.png")
      }
    ]
  },
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "调窗",
    imgSrc: require("@/assets/images/tc.png"),
    selectedTool: "WindowLevel",
    childList: Wlpreset
  },
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "测量",
    imgSrc: require("@/assets/images/cl.png"),
    selectedTool: "Draw",
    childList: [
      {
        selsected: false,
        text: "直线",
        shape: "Line"
      },
      {
        selsected: false,
        text: "角度",
        shape: "Protractor"
      },
      {
        selsected: false,
        text: "矩形",
        shape: "Rectangle"
      },
      {
        selsected: false,
        text: "椭圆",
        shape: "Ellipse"
      },
      {
        selsected: false,
        text: "清除",
        clearAll: true
      }
    ]
  },
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "工具",
    imgSrc: require("@/assets/images/gj.png"),
    // selectedTool:'tool',
    childList: [
      {
        selsected: false,
        text: "反色",
        tool: "invplain"
      },
      {
        selsected: false,
        text: "移动",
        tool: "ZoomAndPan"
      },
      {
        selsected: false,
        text: "缩放",
        tool: "ZoomAndPan"
      },
      {
        selsected: false,
        text: "重置",
        tool: "reset"
      },
      {
        selsected: false,
        text: "播放",
        tool: "play"
      }
      // {
      //   selsected: false,
      //   text: "翻页",
      //   tool: "Scroll"
      // }
    ]
  }
];
//记录反色交互
let dwvPlainArr = [
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  }
];
//记录播放交互
let dwvPlayArr = [
  {
    text: "播放",
    selsected: false
  },
  {
    text: "播放",
    selsected: false
  },
  {
    text: "播放",
    selsected: false
  },
  {
    text: "播放",
    selsected: false
  },
  {
    text: "播放",
    selsected: false
  }
];
//记录播放交互
let curCmdList = [
  {
    flagShow: false
  },
  {
    flagShow: false
  },
  {
    flagShow: false
  },
  {
    flagShow: false
  }
];

export default {
  components: {},
  props: {},
  data() {
    return {
      flagIndex:null,
      imgLoading: true,
      flagShow: false, //上一步操作是否显示
      acImgList: 0, //默认选中第一张缩略图
      powerfilmeList: [],
      params: {},
      title: "影像浏览",
      filmId: "",
      bottomNavListConfig,
      dataLoaded: false,
      loaded: 0,
      tags: null,
      showDicomTags: false,
      selectedTool: "",
      wl: 0,
      wc: 0,
      dwvsItemNum: 1, //默认序列 1 块
      selfDwvsItemAc: 0, //当前点击的devItem
      dwvAppAc: null,
      bottomNavAc: null //底部导航是否选中
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * @param obj 点击的当前对象 i 当前对象的下标 _i 一级的下标 (点击二级导航是需要)
     * */
    clickBottomNav(obj, i, _i) {
      if (_i == undefined) {
        if (this.bottomNavAc == i) {
          this.bottomNavAc = null;
        } else {
          this.bottomNavAc = i;
        }
      }
      if (_i == 0) {
        this.dwvsItemNum = obj.block;
        setTimeout(() => {
          this.$refs.dwvsItem.forEach((ele, j) => {
            if (ele.style.height == "50%") {
              this.$refs.dwvsWrapper.style.flexDirection = "column";
            } else {
              this.$refs.dwvsWrapper.style.flexDirection = "inherit";
            }
            if (j == 0) {
              ele.style.marginBottom = obj.marginBottom;
            }
            ele.style.width = obj.width;
            ele.style.height = obj.height;
            this.fitToSize(i);
          });
        }, 10);
        return;
      }
      if (obj.firstRank) {
        if (obj.selectedTool == "WindowLevel") {
          for (let i = 0; i < this.dwvsItemNum; i++) {
            if (this["dwvApp" + i]) {
              this["dwvApp" + i].onChangeTool({
                currentTarget: {
                  value: "WindowLevel"
                }
              });
            }
          }
        }
        //当前元素是选中的
        if (obj.selsected) {
          obj.selsected = !obj.selsected;
          return;
        }
        this.resetBottomNavListConfig(obj);
        obj.selsected = !obj.selsected;
      } else {
        this.resetBottomNavListConfig(obj, _i);
        obj.selsected = !obj.selsected;
        //点击二级 选中功能设置
        this.onChangeTool(obj, _i);
      }
    },

    resetBottomNavListConfig(obj, i) {
      if (!obj.firstRank) {
        this.bottomNavListConfig[i].childList.forEach(element => {
          element.selsected = false;
        });
        return;
      }

      this.bottomNavListConfig.forEach(element => {
        element.selsected = false;
      });
    },
    /**
     * @param obj 点击的当前对象 i 一级的下标 (点击二级导航是需要)
     * */
    onChangeTool(obj, i) {
      if (!this[this.dwvAppAc].getDrawController()) {
        return;
      }
      //选中的是工具 反色
      if (obj.tool && obj.tool == "invplain") {
        if (
          dwvPlainArr[this.selfDwvsItemAc] &&
          dwvPlainArr[this.selfDwvsItemAc].tool == "invplain"
        ) {
          this[this.dwvAppAc].onChangeColourMap({
            currentTarget: {
              value: dwvPlainArr[this.selfDwvsItemAc].tool
            }
          });
          dwvPlainArr[this.selfDwvsItemAc].tool = "plain";
          return;
        }
        if (
          dwvPlainArr[this.selfDwvsItemAc] &&
          dwvPlainArr[this.selfDwvsItemAc].tool == "plain"
        ) {
          this[this.dwvAppAc].onChangeColourMap({
            currentTarget: {
              value: dwvPlainArr[this.selfDwvsItemAc].tool
            }
          });
          dwvPlainArr[this.selfDwvsItemAc].tool = "invplain";
          return;
        }
      }

      //选中的是工具 移动缩放
      if (obj.tool && obj.tool == "ZoomAndPan") {
        for (let ii = 0; ii < this.dwvsItemNum; ii++) {
          if (this["dwvApp" + ii]) {
            this["dwvApp" + ii].onChangeTool({
              currentTarget: {
                value: obj.tool
              }
            });
          }
        }
        return;
      }
      //选中的是工具 自适应
      if (obj.tool && obj.tool == "reset") {
        this[this.dwvAppAc].onDisplayReset();
        return;
      }
      //选中的是工具 播放
      if (obj.tool && obj.tool == "play") {
        this.playStatue(obj);
        this[this.dwvAppAc].onChangeTool({
          currentTarget: {
            value: "Scroll"
          }
        });
        this[this.dwvAppAc].MZYL.play();
        return;
      }
      //选中的是工具 翻页
      if (obj.tool && obj.tool == "Scroll") {
        this[this.dwvAppAc].onChangeTool({
          currentTarget: {
            value: "Scroll"
          }
        });
        return;
      }
      this[this.dwvAppAc].onChangeTool({
        currentTarget: {
          value: this.bottomNavListConfig[i].selectedTool
        }
      });
      //如果是draw
      if (obj.shape) {
        for (let ii = 0; ii < this.dwvsItemNum; ii++) {
          if (this["dwvApp" + ii]) {
            this["dwvApp" + ii].onChangeTool({
              currentTarget: {
                value: this.bottomNavListConfig[i].selectedTool
              }
            });
          }
          if (this["dwvApp" + ii]) {
            this["dwvApp" + ii].onChangeShape({
              currentTarget: {
                value: obj.shape
              }
            });
          }
        }

        // this[this.dwvAppAc].onChangeShape({
        //   currentTarget: {
        //     value: obj.shape
        //   }
        // });
      }
      //如果是draw
      if (obj.clearAll) {
        this[this.dwvAppAc].MZYL.clearAll();
        this.flagShow = false;
      }
      //如果是预设窗口
      if (obj.windowLevelPrese) {
        this[this.dwvAppAc].onChangeWindowLevelPreset({
          currentTarget: {
            value: obj.windowLevelPrese
          }
        });
      }
      //如果是预设窗口
      if (obj.modality) {
        this[this.dwvAppAc].MZYL.setWindowLevel(obj.name);
      }
    },
    /**
     *绘画标注返回上一步
     * */
    onUndo() {
      this[this.dwvAppAc].onUndo();
    },
    getImg(i) {
      if (!this.imgLoading) {
        return;
      }
      if (i != undefined) {
        this.acImgList = i;
      }

      this[this.dwvAppAc].flagIndex = i;
      this.flagIndex = i;

      //   if (this.powerfilmeList[i].MZYLstores) {
      //     this[this.dwvAppAc].MZYL.loadURLsStores(
      //       this.powerfilmeList[i].MZYLstores
      //     );
      //     return;
      //   }

      this[this.dwvAppAc].loadURLs(this.powerfilmeList[i].getDcmFilePath);

      //   setTimeout(() => {
      //     this.powerfilmeList[i].MZYLstores = this[
      //       this.dwvAppAc
      //     ].MZYL.getMZYLstores();
      //     console.log(this.powerfilmeList);
      //   }, 5000);
    },
    selfDwvsItemAcFn(i) {
      this.selfDwvsItemAc = i;
      let self = this;

      this.$refs.dwvsCanvas[i].style.pointerEvents = "auto";
      this.init(i);
      // this.$refs.dwvsCanvas.forEach((ele, j) => {
      //   if (j == i) {
      //     ele.style.pointerEvents = "auto";
      //     this.init(i);
      //   } else {
      //     ele.style.pointerEvents = "none";
      //     // 设置状态
      //     if (this.$refs.drawDiv[j].children.length > 0) {
      //       this.$refs.drawDiv[j].children[0].style.pointerEvents = "none";
      //     }
      //   }
      // });
      this.playStatue();
      this.flagShow = this.getCurCmdStatus(i);
      if (document.querySelectorAll(".drawDiv")[i].children.length) {
        this.acImgList = this[this.dwvAppAc].flagIndex;

      } else {
        this.acImgList = null;
      }
      //视图默认选中缩放 移动
    },
    fitToSize(index) {
      // --------------------------------------------------------
      if (index == 0) {
        this.$refs.dwvsCanvas.forEach((ele, j) => {
            this.selfDwvsItemAc = 0;
            this.dwvAppAc = "dwvApp0";
            this["dwvApp" + 0].loadURLs(this.powerfilmeList[this.flagIndex].getDcmFilePath);
            this.acImgList = this.flagIndex;
            this["dwvApp" + 0].flagIndex = this.flagIndex;
            console.log(this.acImgList);
        });
      } else {
        this.$refs.dwvsCanvas.forEach((ele, j) => {
          if (j == 0) {
            ele.style.pointerEvents = "auto";
          } else {
            ele.style.pointerEvents = "none";
          }
          if (this["dwvApp" + j] && this["dwvApp" + j].getViewController()) {
            // this['dwvApp' + j].onDisplayReset();
            this["dwvApp" + j].fitToSize(
              this["dwvApp" + j].getLayerContainerSize(),
              this["dwvApp" + j].getImageLayer()
            );
          }
          // if (this.powerfilmeList[1].MZYLstores) {
          //   this[this.dwvAppAc].MZYL.loadURLsStores(
          //     this.powerfilmeList[1].MZYLstores
          //   );
          // }
        });
      }

      //   this.selfDwvsItemAc = 0;
      //   this.dwvAppAc = "dwvApp0";

      // -------------------点击序列 初始化-------------------------------------
    },
    setDwvId(i) {
      return "dwv" + i;
    },
    //初始化项目
    //默认id 'dwv'
    init(dwvId = "0") {
      if (this["dwvApp" + dwvId]) {
        this.dwvAppAc = "dwvApp" + dwvId;
        this["dwvApp" + dwvId].__selftest = dwvId;
        //设置 DrawController ViewController
        this["dwvApp" + dwvId].MZYL.uploadDrawViewController(
          this["dwvApp" + dwvId]
        );
        return;
      }
      /******************** dwv ************************** */
      // create app
      this.dwvAppAc = "dwvApp" + dwvId;
      this[this.dwvAppAc] = new dwv.App();
      let _self = this;
      // display loading time
      var listener = function(event) {
        _self.wc = event.wc;
        _self.wl = event.ww;
      };
      this[this.dwvAppAc].addEventListener("wl-width-change", listener);
      this[this.dwvAppAc].addEventListener("wl-center-change", listener);
      // initialise app
      this[this.dwvAppAc].init({
        containerDivId: "dwv" + dwvId,
        fitToWindow: true,
        tools: [
          "Scroll",
          "WindowLevel",
          "ZoomAndPan",
          "Draw",
          "Livewire",
          "Filter"
        ],
        filters: ["Threshold", "Sharpen", "Sobel"],
        // gui: ["tool", "load", "help", "undo", "version", "tags", "drawList"],
        gui: ["undo"],
        shapes: ["Line", "Protractor", "Rectangle", "Roi", "Ellipse"],
        isMobile: true
      });
      // progress
      var self = this;
      this[this.dwvAppAc].addEventListener("load-start", function(event) {
        self.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
        self.imgLoading = false;
      });
      this[this.dwvAppAc].addEventListener("load-progress", function(event) {
        self.loaded = event.loaded;
      });
      this[this.dwvAppAc].addEventListener("load-end", function(event) {
        self.$indicator.close();
        //是否加载完毕
        self.imgLoading = true;
      });
      this[this.dwvAppAc].addEventListener("draw-create", function(event) {
        self.flagShow = true;
        curCmdList[self.selfDwvsItemAc].flagShow = true;
        console.log("draw-create");
      });
      this[this.dwvAppAc].addEventListener("draw-delete", function(event) {
        if (!self[self.dwvAppAc].MZYL.getCurCmdIndex()) {
          self.flagShow = false;
          curCmdList[self.selfDwvsItemAc].flagShow = false;
        }
      });
      this[this.dwvAppAc].addEventListener("play-start", function(event) {
        setTimeout(() => {
          dwvPlayArr[self.selfDwvsItemAc].text = "播放";
          dwvPlayArr[self.selfDwvsItemAc].selsected = false;
          bottomNavListConfig[3].childList[4].text = "播放";
        }, 200);
      });
    },
    //获取影像数据
    getBrowsing(params) {
      let result = [
        {
          getSmallFilePath: [
            "https://www.baidu.com/img/bd_logo1.png?qua=high",
            "https://www.baidu.com/img/bd_logo1.png?qua=high"
          ],
          getDcmFilePath: [
            "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323131.dcm"
          ]
        },
        {
          getSmallFilePath: [
            "https://www.baidu.com/img/bd_logo1.png?qua=high",
            "https://www.baidu.com/img/bd_logo1.png?qua=high"
          ],
          getDcmFilePath: [
            "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm",
            "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm"
          ]
        }
      ];
      this.powerfilmeList = result;
      //默认加载第一个序列
      this[this.dwvAppAc].loadURLs(this.powerfilmeList[0].getDcmFilePath);
      this[this.dwvAppAc].flagIndex = 0;
      //   HttpService.api({
      //     url: "/getFilm",
      //     params: params,
      //     headers: {}
      //   }).then(res => {
      //     if (res.success) {
      //       let el = this.$refs.tcSfPathWarpper;
      //       setTimeout(() => {
      //         let elChildrenArr = this.$refs.tcSfPath;
      //         this.setTcSfPathWarpper(el, elChildrenArr.length);
      //       }, 10);

      //       //处理数据
      //       res.result = res.result.slice(2);
      //       this.powerfilmeList = res.result;
      //       //默认加载第一个序列=>第一个序列
      //       this[this.dwvAppAc].loadURLs(this.powerfilmeList[0].getDcmFilePath);
      //     }
      //   });
    },
    /*方法说明
     *@method 方法名
     *@param el 元素节点，num 子级的长度
     *@return  Void
     */
    setTcSfPathWarpper(el, num) {
      let elChildren = 138;
      el.style.width =
        ((elChildren * num) / 100 + 0.05 * num).toFixed(2) + "rem";
    },

    //遍历 动画的状态
    playStatue(obj) {
      if (obj && obj.selsected) {
        if (dwvPlayArr[this.selfDwvsItemAc].text == "播放") {
          dwvPlayArr[this.selfDwvsItemAc].selsected = true;
          dwvPlayArr[this.selfDwvsItemAc].text = "暂停";
          bottomNavListConfig[3].childList[4].text = "暂停";
        } else {
          dwvPlayArr[this.selfDwvsItemAc].selsected = false;
          dwvPlayArr[this.selfDwvsItemAc].text = "播放";
          bottomNavListConfig[3].childList[4].text = "播放";
        }
        return;
      }
      if (dwvPlayArr[this.selfDwvsItemAc].selsected) {
        dwvPlayArr[this.selfDwvsItemAc].text = "暂停";
        bottomNavListConfig[3].childList[4].text = "暂停";
        return;
      }
      dwvPlayArr[this.selfDwvsItemAc].text = "播放";
      bottomNavListConfig[3].childList[4].text = "播放";
    },
    //查询当前undoStack 的状态
    getCurCmdStatus(index) {
      let b;
      b = curCmdList[index].flagShow;
      return b;
    }
  },
  created() {},
  mounted() {
    this.init();
    this.params = {
      patientid: this.$route.params.patientid,
      studyid: this.$route.params.studyid,
      hospcode: this.$route.params.hospcode,
      hospdomain: this.$route.params.hospdomain
    };
    this.getBrowsing(this.params);
  },
  beforeDestroy() {
    bottomNavListConfig.forEach(ele => {
      ele.selsected = false;
    });
  }
  /******************** dwv ************************** */
};
</script>
<style lang="scss" scoped>
.infoLayer {
  color: #cde;
}

.dwvs_wrapper {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;

  .dwvs_item {
    width: 100%;
    height: 100%;
  }

  .layerContainer {
    border: 0.06rem solid #fff;
  }
  .dwvs_item.ac {
    .layerContainer {
      border: 0.06rem solid #44a7fb;
      box-sizing: border-box;
      box-shadow: 0rem 0rem 0.05rem 0px #4096e0;
    }
  }
}

._sequence_style {
  bottom: 3.1rem !important;
  width: 0.97rem !important;
  padding: 0 0.17rem;
  background-color: #eaeaea;
  padding-bottom: 0.3rem;

  ._sequence_style_border_r {
    border-right: 0.03rem solid #737373;
  }

  ._sequence_style_border_b {
    border-bottom: 0.03rem solid #737373;
  }

  li {
    width: 0.6rem;
    height: 0.44rem;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;

    img {
      width: 100% !important;
      height: 100% !important;
    }

    ._l_r_2 {
      width: 0.3rem;
      height: 100%;
    }

    ._t_b_2 {
      width: 100%;
      height: 0.22rem;
    }
  }
}

.imageBrowsing_wrapper {
  height: 100%;
}

.imageBrowsing_content {
  // padding-bottom: 3.12rem;
  height: 100%;

  > div:nth-child(1) {
    height: 75%;

    ._flag {
      width: pxToRem(66);
      height: pxToRem(73);
      top: pxToRem(23);
      right: pxToRem(23);
      z-index: 1;

      img {
        width: pxToRem(66);
        height: pxToRem(73);
      }
    }

    ._wl {
      z-index: 1;
      right: pxToRem(23);
      bottom: pxToRem(7);
      color: rgb(115, 115, 115);
    }

    // height: pxToRem(940);
    padding: pxToRem(10) pxToRem(10) pxToRem(10) pxToRem(10);
    box-sizing: border-box;

    img {
      width: 100%;
    }
  }

  .imageBrowsing_content_fixed_warpper {
    z-index: 10;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 23%;

    > div:nth-child(1) {
      height: 60%;
      padding-left: pxToRem(3);
      padding: pxToRem(16) 0;
      background: #eaeaea;
      width: 100%;
      overflow-x: auto;

      > div {
        height: 100%;
        // width: calc(1.58rem * 8 + 0.24rem);

        div {
          width: pxToRem(138);
          height: 100%;
          float: left;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    > div:nth-child(2) {
      height: 40%;

      > div {
        width: 24.9%;
        height: 100%;
        float: left;
        // line-height: pxToRem(120);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: pxToRem(50);
          height: pxToRem(50);
        }
      }
    }
  }

  .button_nav_ul {
    width: 100%;
    bottom: pxToRem(120);
    left: 0;
    border: 1px solid rgb(214, 214, 214);
    background: #fff;
    line-height: pxToRem(70);
    text-align: center;
    z-index: 100;
  }
}

.c_dwv {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

.button-row {
  text-align: center;
}

.legend {
  text-align: center;
  font-size: 8pt;
}

/* Layers */
.layerContainer {
  position: relative;
  padding: 0;
  margin: auto;
  text-align: center;
  width: 100% !important;
  height: 100% !important;
  // border: 1px solid #333;
  border-radius: 0.06rem;
  background: #000;

  canvas {
    width: 100% !important;
  }
}

.drawDiv {
  position: absolute;
  pointer-events: none;
  width: 100% !important;
  height: 100% !important;
  top: 0;
  left: 0;
}

/* drag&drop */
.dropBox {
  // border: 5px dashed #ccc;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100%;
}

.nav_item.ac {
  background: #e0e0e0;
}

.flag_num {
  right: 0.05rem;
  bottom: 0.03rem;
  color: #f21818;
  font-size: 0.25rem;
  text-shadow: 0px 0px 4px #fff;
}

.acImg {
  border: 2px solid #469feb;
}

/* Info */
.info {
  color: #cde;
  text-shadow: 1px 1px #000;
  font-size: 0.25rem;
}

.infoc {
  color: #ff0;
  text-shadow: 1px 1px #000;
  font-size: 0.25rem;
}

.infotl {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
}

.infotc {
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  text-align: center;
}

.infotr {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}

.infocl {
  position: absolute;
  bottom: 50%;
  left: 0;
  text-align: left;
}

.infocr {
  position: absolute;
  bottom: 50%;
  right: 2px;
  text-align: right;
}

.infobl {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
}

.infobc {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  text-align: center;
}

.infobr {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
}

.plot {
  position: absolute;
  width: 100px;
  height: 50px;
  bottom: 15px;
  right: 0;
}

.infoLayer ul {
  margin: 0;
  padding: 2px;
  list-style-type: none;
}

.infoLayer li {
  margin-top: 0;
}

.infoLayer canvas {
  margin: 0;
  padding: 2px;
}
</style>
